<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>添加教务人员</title>
</head>
<body>
<div id="app">
    <main class="container">
        <form @submit.prevent="doAdd" style="margin-top: 32px">
            <fieldset>
                <label>
                    姓名
                    <input v-model="name" required />
                </label>
                <label>
                    工号
                    <input v-model="code" required />
                </label>
                <label>
                    密码
                    <input type="password" v-model="password" required />
                </label>
                <label>
                    备注
                    <input v-model="remark" />
                </label>
            </fieldset>
            <button :disabled="!canClick">添加</button>
            <div v-if="displaySuccess" style="color: rgb(0, 137, 90); margin-left: 24px;">
                操作成功，即将返回
            </div>
        </form>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                name: "",
                code: "",
                password: "",
                remark: "",
                canClick: true,
                displaySuccess: false
            };
        },
        methods: {
            doAdd() {
                const formData = {
                    name: this.name,
                    code: this.code,
                    password: this.password,
                    remark: this.remark
                };
                this.canClick = false;

                axios.post('/deans', formData)
                    .then(response => {
                        if (response.status === 200 && response.data.code === 200) {
                            this.displaySuccess = true;
                            setTimeout(() => {
                                window.location.href = "/dean-list.html";
                            }, 1000);
                        }
                    })
                    .catch(error => {
                        console.error("添加教务人员出错：", error);
                    })
                    .finally(() => {
                        this.canClick = true;
                    });
            }
        }
    };

    Vue.createApp(App).mount("#app");
    app.mount("#app");
</script>
</body>
</html>
